<template>
    <div class="w_h_100">
        
        <div class="box">
            <div class="inlet">系统管理 > 产品管理 > <span class="size">产品回收站</span></div>
            <myform :fields="fields" :model="values" class="m_t_10" :options="options">
                <template v-slot:button>
                    <el-button @click="resetting">重置</el-button>
                    <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
                </template>
            </myform>
        </div>
        <div class="mytable m_t_10 ">
            <div class="d_f j_c_s_b a_i_c">
                <h4>回收站-产品明细列表</h4>
                <div>
                    <el-button :icon="DeleteFilled" type="danger" plain @click="deleteOut" v-hasPerm="'deleteAllProduct'">彻底删除</el-button>
                    <el-button type="primary" plain :icon="Refresh" @click="reduction" v-hasPerm="'restoreProduct'">还原</el-button>
                </div>
            </div>
            <mytable :fields="tableFields" width="100" ref="tableRef" :values="values" api="productListByPage"
                class="m_t_10" :isSelection="true" @selecSelection="selecSelection">
                <template v-slot:category="{ row }">
                    <span v-if="row.category == 1">融资单笔</span>
                    <span v-if="row.category == 2">融资批量</span>
                    <span v-if="row.category == 3">非融单笔</span>
                    <span v-if="row.category == 4">非融批量</span>
                </template>
                <template v-slot:operation="{ row }">
                    <div class="d_f j_c_s_b">
                        <span class="edit" @click="detail(row)">详情</span>
                    </div>
                </template>
            </mytable>
        </div>
        <log :values="logValues" @logHandleClose="logHandleClose"></log>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { productRecycleBinType } from '../../../type/system'
import { Search, Refresh, DeleteFilled } from '@element-plus/icons-vue'
import { copy } from '../../../utils/date'
import { Message } from '../../../utils/resetMessage'
import { ElMessageBox } from 'element-plus'
import { productRemove, productRestore } from '../../../api/system/product'
import { useRouter } from 'vue-router'
import log from '../../../components/dialog/log.vue'
const values = {
    name: '',
    category: '',
    status: '',//状态：1-启用，2-禁用
    deleted: 1
}
export default defineComponent({
    name: '',
    components: {
        log
    },
    setup() {
        const data: productRecycleBinType = reactive({
            fields: [
                {
                    label: "产品名称",
                    prop: 'name',
                    placeholder: '请输入产品名称',
                    type: 'input',
                    labelWidth: '70px'
                },
                {
                    label: "产品类型",
                    prop: 'category',
                    placeholder: '请选择产品类型',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                },
                {
                    label: "产品状态",
                    prop: 'status',
                    placeholder: '请选择产品状态',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                },
                {
                    prop: 'button'
                }
            ],
            values: copy(values),
            options: {
                category: [
                    {
                        name: '融资单笔',
                        id: 1,
                    },
                    {
                        name: '融资批量',
                        id: 2,
                    },
                    {
                        name: '非融单笔',
                        id: 3,
                    },
                    {
                        name: '非融批量',
                        id: 4,
                    },
                ],
                status: [
                    {
                        name: '启用',
                        id: '1',
                    },
                    {
                        name: '停用',
                        id: '2',
                    },
                ],
            },
            tableFields: [
                {
                    label: '产品名称',
                    prop: 'name',
                },
                {
                    label: '产品类型',
                    prop: 'category',
                },
                {
                    label: '创建人',
                    prop: 'createdName',
                },
                {
                    label: '创建时间',
                    prop: 'createdTime',
                },
            ],
            selection: [],
            logValues: {
                bizId: '',
                category: '1'
            }
        })
        onBeforeMount(() => {
        })
        const tableRef = ref()
        const router = useRouter()
        const methods = {
            //表格数据重置
            resetting() {
                data.values = copy(values)
                tableRef.value.resettingTable(data.values)
            },
            //列表根据筛选条件搜索
            searchFor() {
                tableRef.value.handleCurrentChange(1)
            },
            //彻底删除产品
            deleteOut() {
                if (data.selection.length == 0) {
                    Message({ type: 'error', message: '请选择需要删除的选项' })
                    return
                }
                ElMessageBox.confirm(
                    '确定彻底删除所选产品?',
                    '彻底删除产品',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error',
                    }
                )
                    .then(() => {
                        productRemove({ ids: data.selection }).then(() => {
                            Message({ type: 'success', message: '删除成功' })
                            tableRef.value.handleCurrentChange(1)
                        })
                    })
            },
            //从回收站回收产品
            reduction() {
                if (data.selection.length == 0) {
                    Message({ type: 'error', message: '请选择需要还原的选项' })
                    return
                }
                ElMessageBox.confirm(
                    '确定还原所选产品?',
                    '还原产品',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        productRestore({ ids: data.selection }).then(() => {
                            Message({ type: 'success', message: '还原成功' })
                            tableRef.value.handleCurrentChange(1)
                        })
                    })
            },
            selecSelection(selection: any) {
                data.selection = selection.map((item: any) => {
                    return item.id
                })
            },
            //查看产品日志
            detail(row: any) {
                data.logValues.bizId = row.id
            },
            //关闭日志弹窗并清除业务id
            logHandleClose() {
                data.logValues.bizId = ''
            },
        }
        return {
            ...toRefs(data),
            ...methods, Search, Refresh, DeleteFilled,
            tableRef
        }
    }
})
</script>
<style scoped lang='scss'>
.box {
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    height: 70px;
    padding: 10px 32px;
    margin-top: 10px;
}

.mytable {
    overflow-y: auto;
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 10px 32px;
    height: calc(100% - 125px);
}
</style>